<template>
  <div class="page">
    <global-header title="快捷回复" @back="$router.back()">
      <template #right>
        <div class="mr-[10px] flex items-center absolute">
          <div class="flex items-center text-[15px] mr-[10px]" @click="handleShowPopup(null)">
            <van-icon name="plus" />
            <span>添加</span>
          </div>
          <div class="flex items-center mt-[1px] ml-[10px]">
            <van-icon name="question-o" class="!text-[17px]" @click="handleTip" />
          </div>
        </div>
      </template>
    </global-header>
    <main class="page-main">
      <scroll-list
        emptyImage
        enableRefresh
        v-model:loading="state.loading"
        v-model:refresh="state.refresh"
        :finished="state.finished"
        :length="list.length"
        @refresh="refresh"
        @load="load"
      >
        <template v-for="item in list">
          <van-swipe-cell>
            <van-cell @click="handleShowPopup(item)">
              <template #title>
                <ul class="text-[14px]">
                  <li class="flex justify-between">
                    <div>消息标题：</div>
                    <div class="flex-1 w-0 break-all">
                      {{ item.Title }}
                    </div>
                  </li>
                  <li class="flex justify-between">
                    <div>消息内容：</div>
                    <div class="flex-1 w-0 break-all">
                      {{ item.Content }}
                    </div>
                  </li>
                  <li class="text-[#999]">创建时间：{{ formatDate(item.CreatedAt) }}</li>
                </ul>
              </template>
            </van-cell>
            <template #right>
              <van-button
                class="!h-full"
                square
                type="danger"
                text="删除"
                @click="handleDelete(item)"
              />
            </template>
          </van-swipe-cell>
        </template>
      </scroll-list>
    </main>
    <ReplyPopup
      :data="cur"
      :sort="sort"
      ref="replyPopupRef"
      @update="handleUpdate"
      @refresh="refresh"
    />
  </div>
</template>
<route>
  {
    name: "admin-setting-reply",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import ReplyPopup from "./components/reply-popup.vue";
import { reqReplyDel, reqReplyList } from "@/api/setting";
import { useList } from "@/hooks/useList";
import { formatDate } from "@/utils/common";
import { toast } from "@/utils/toast";
import { cloneDeep } from "lodash-es";
import { showDialog } from "vant";

const cur = ref<ReplyMo | null>(null);
const replyPopupRef = ref();
const sort = computed(() => list.value.length + 1);
// 获取列表
const { state, list, getData, refresh, load } = useList<ReplyMo>(reqReplyList, () => ({}));

watch(
  () => list.value,
  val => {
    val.sort((a, b) => a.CSort - b.CSort);
  }
);

const handleTip = () => {
  showDialog({ message: "向左滑动可以删除快捷回复" });
};

const handleShowPopup = (item: ReplyMo | null) => {
  cur.value = item;
  nextTick(() => {
    replyPopupRef.value?.open();
  });
};

// 更新数据
const handleUpdate = (item: ReplyMo) => {
  const arr = cloneDeep(list.value);
  arr.forEach(jtem => {
    if (jtem.Id == item.Id) {
      jtem.Title = item.Title;
      jtem.Content = item.Content;
      jtem.CSort = item.CSort;
    }
  });
  list.value = cloneDeep(arr);
};

// 删除
const handleDelete = (row: ReplyMo) => {
  showConfirmDialog({
    title: "",
    message: `是否删除【${row.Title}】快捷回复？`,
    className: "confirm-dialog",
    beforeClose: async (action: string) => {
      return new Promise<boolean>(async resolve => {
        if (action === "confirm") {
          try {
            await reqReplyDel(row.Id);
            toast.success("删除成功");
            list.value = list.value.filter(jtem => jtem.Id != row.Id);
            resolve(true);
          } catch (error) {
            resolve(true);
          }
        } else {
          resolve(true);
        }
      });
    }
  });
};

onMounted(() => {
  getData();
});
</script>
